<template>
  <view class="user-overview">
    <!-- 顶部用户信息卡片 -->
    <view class="user-header-card">
      <view class="user-info-section">
        <view class="user-details">
          <text class="greeting-text">{{ getGreeting() }}，{{ userInfo.userName }}！</text>
          <text class="date-text">{{ currentDate }}</text>
        </view>
        <view class="avatar-container">
          <image class="avatar-image" :src="`${baseURL}${userInfo.avatar}`" mode="aspectFill">
          </image>
        </view>
      </view>
    </view>

    <!-- 统计概览区域 -->
    <view class="stats-overview">

      <!-- 统计卡片网格 -->
      <view class="stats-grid">
        <view class="stat-card">
          <view class="stat-icon">
            <text class="icon-emoji">📋</text>
          </view>
          <view class="stat-content">
            <text class="stat-number">{{ totalTasks }}</text>
            <text class="stat-label">总任务</text>
          </view>
        </view>

        <view class="stat-card">
          <view class="stat-icon">
            <text class="icon-emoji">📚</text>
          </view>
          <view class="stat-content">
            <text class="stat-number">{{ studyTasks }}</text>
            <text class="stat-label">学习任务</text>
          </view>
        </view>

        <view class="stat-card">
          <view class="stat-icon">
            <text class="icon-emoji">🏠</text>
          </view>
          <view class="stat-content">
            <text class="stat-number">{{ houseworkTasks }}</text>
            <text class="stat-label">家务任务</text>
          </view>
        </view>

        <view class="stat-card">
          <view class="stat-icon">
            <text class="icon-emoji">✅</text>
          </view>
          <view class="stat-content">
            <text class="stat-number">{{ completedTasks }}</text>
            <text class="stat-label">已完成</text>
          </view>
        </view>
      </view>

      <!-- 进度条卡片 -->
      <view class="progress-card">
        <view class="progress-header">
          <text class="progress-title">今日进度</text>
          <text class="progress-percentage">{{ Math.round(completedRate * 100) }}%</text>
        </view>
        <view class="progress-bar-container">
          <view class="progress-bar">
            <view class="progress-fill" :style="{ width: `${completedRate * 100}%` }"></view>
          </view>
          <text class="progress-subtitle">{{ completedTasks }}/{{ totalTasks }}</text>
        </view>
      </view>

    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted, computed, watch } from 'vue';
import { userInfo } from '@/stores/user';
import { baseURL } from '../utils/config';

	/**
	 * 组件属性接口定义
	 */	interface Props {
  totalTasks: number;
  studyTasks: number;
  houseworkTasks: number;
  completedTasks: number;
  completedRate: number;
}

/**
 * 定义组件属性并设置默认值
 */
const props = defineProps({
  totalTasks: {
    type: Number,
    default: 0
  },
  studyTasks: {
    type: Number,
    default: 0
  },
  houseworkTasks: {
    type: Number,
    default: 0
  },
  completedTasks: {
    type: Number,
    default: 0
  },
  completedRate: {
    type: Number,
    default: 0
  }
});

	/**
	 * 当前日期显示文本
	 * @type {string} 格式化的日期字符串
	 */	const currentDate = ref('');


/**
 * 组件挂载时执行的初始化操作
 */
onMounted(() => {
  handleUpdateCurrentDate();
});

	/**
	 * 更新当前日期显示
	 * 格式化当前日期为"今天是XXXX年XX月XX日，星期X"的形式
	 */	const handleUpdateCurrentDate = () => {
  const now = new Date();
  const year = now.getFullYear();
  const month = now.getMonth() + 1;
  const day = now.getDate();
  const weekdays = ['日', '一', '二', '三', '四', '五', '六'];
  const weekday = weekdays[now.getDay()];
  currentDate.value = `今天是${year}年${month}月${day}日，星期${weekday}`;
};

/**
 * 根据时间获取问候语
 */
const getGreeting = () => {
  const hour = new Date().getHours();
  if (hour < 6) return '夜深了';
  if (hour < 9) return '早上好';
  if (hour < 12) return '上午好';
  if (hour < 14) return '中午好';
  if (hour < 17) return '下午好';
  if (hour < 19) return '傍晚好';
  return '晚上好';
};

</script>

<style lang="scss">
.user-overview {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

/* 用户信息卡片 */
.user-header-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 20rpx;
  padding: 32rpx;
  margin: 20rpx;
  box-shadow: 0 8rpx 32rpx rgba(102, 126, 234, 0.3);
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    animation: shimmer 3s ease-in-out infinite;
  }
}

@keyframes shimmer {

  0%,
  100% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(180deg);
  }
}

.user-info-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 1;
}

.user-details {
  flex: 1;
}

.greeting-text {
  display: block;
  font-size: 36rpx;
  font-weight: 700;
  color: white;
  margin-bottom: 8rpx;
  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
}

.date-text {
  display: block;
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
}

.avatar-container {
  position: relative;
  width: 120rpx;
  height: 120rpx;
}

.avatar-image {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 6rpx solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.2);
}

.avatar-status {
  position: absolute;
  bottom: 8rpx;
  right: 8rpx;
  width: 24rpx;
  height: 24rpx;
  background: #4ade80;
  border-radius: 50%;
  border: 4rpx solid white;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
}

/* 统计概览区域 */
.stats-overview {
  padding: 20rpx;
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

/* 进度条卡片 */
.progress-card {
  background: white;
  border-radius: 20rpx;
  padding: 24rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
  border: 1rpx solid #f1f5f9;
}

/* 统计卡片网格 */
.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 16rpx;
  width: 100%;
}

/* 统计卡片样式 */
.stat-card {
  background: white;
  border-radius: 20rpx;
  padding: 24rpx 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
  border: 1rpx solid #f1f5f9;
  transition: all 0.3s ease;
  min-height: 140rpx;

  &:hover {
    transform: translateY(-4rpx);
    box-shadow: 0 12rpx 40rpx rgba(0, 0, 0, 0.15);
  }
}

/* 统计卡片图标样式 */
.stat-card .stat-icon {
  width: 72rpx;
  height: 72rpx;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8rpx;
}

.stat-card .icon-emoji {
  font-size: 36rpx;
}

.stat-card .stat-content {
  text-align: center;
}

.stat-card .stat-number {
  font-size: 44rpx;
  font-weight: 700;
  color: #1e293b;
  line-height: 1;
  margin-bottom: 2rpx;
}

.stat-card .stat-label {
  font-size: 28rpx;
  color: #64748b;
  font-weight: 500;
  line-height: 1;
}

/* 不同位置统计卡片的图标背景色 */
.stats-grid .stat-card:nth-child(1) .stat-icon {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
}

.stats-grid .stat-card:nth-child(2) .stat-icon {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
}

.stats-grid .stat-card:nth-child(3) .stat-icon {
  background: linear-gradient(135deg, #ec4899 0%, #be185d 100%);
}

.stats-grid .stat-card:nth-child(4) .stat-icon {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

/* 进度环样式 */
.progress-ring {
  position: relative;
  width: 200rpx;
  height: 200rpx;
}

.progress-circle {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #f1f5f9;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: 20rpx;
    left: 20rpx;
    right: 20rpx;
    bottom: 20rpx;
    background: white;
    border-radius: 50%;
    z-index: 2;
  }
}

/* 进度条样式 */
.progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
}

.progress-title {
  font-size: 32rpx;
  font-weight: 700;
  color: #1e293b;
}

.progress-percentage {
  font-size: 32rpx;
  font-weight: 800;
  color: #667eea;
}

.progress-bar-container {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.progress-bar {
  width: 100%;
  height: 12rpx;
  background: #f1f5f9;
  border-radius: 6rpx;
  overflow: hidden;
  position: relative;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
  border-radius: 6rpx;
  transition: width 0.6s ease;
  position: relative;

  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
    animation: shimmer-progress 2s infinite;
  }
}

@keyframes shimmer-progress {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(100%);
  }
}

.progress-subtitle {
  font-size: 24rpx;
  color: #94a3b8;
  font-weight: 500;
  text-align: center;
}

/* 角落统计卡片样式 */
.corner-stat .stat-icon {
  width: 40rpx;
  height: 40rpx;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8rpx;
}

.corner-stat .icon-emoji {
  font-size: 20rpx;
}

.corner-stat .stat-content {
  text-align: center;
}

.corner-stat .stat-number {
  font-size: 24rpx;
  font-weight: 700;
  color: #1e293b;
  line-height: 1;
  margin-bottom: 2rpx;
}

.corner-stat .stat-label {
  font-size: 16rpx;
  color: #64748b;
  font-weight: 500;
  line-height: 1;
}

/* 不同类型统计卡片的图标背景色 */
.corner-stat.top-left .stat-icon {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
}

.corner-stat.top-right .stat-icon {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
}

.corner-stat.bottom-left .stat-icon {
  background: linear-gradient(135deg, #ec4899 0%, #be185d 100%);
}

.corner-stat.bottom-right .stat-icon {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}


/* 动画效果 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20rpx);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.user-header-card,
.progress-card,
.stats-grid {
  animation: fadeInUp 0.6s ease-out;
}

.progress-card {
  animation-delay: 0.1s;
}

.stats-grid {
  animation-delay: 0.2s;
}

.stat-card {
  animation: scaleIn 0.6s ease-out both;
}

.stats-grid .stat-card:nth-child(1) {
  animation-delay: 0.3s;
}

.stats-grid .stat-card:nth-child(2) {
  animation-delay: 0.4s;
}

.stats-grid .stat-card:nth-child(3) {
  animation-delay: 0.5s;
}

.stats-grid .stat-card:nth-child(4) {
  animation-delay: 0.6s;
}
</style>